<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
	<meta charset="utf-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<meta name="viewport" content="width=device-width, initial-scale=1"/>
	<meta name="description" content="记事本"/>
	<meta name="author" content="joney"/>
	<title>记事本</title>
	<link rel="stylesheet" type="text/css" th:href="@{/easyui/themes/default/easyui.css}"/>
	<link rel="stylesheet" type="text/css" th:href="@{/easyui/themes/mobile.css}"/>
	<link rel="stylesheet" type="text/css" th:href="@{/easyui/themes/icon.css}"/>

	<script type="text/javascript" th:src="@{/js/jquery-1.8.0.min.js}"></script>
	<script type="text/javascript" th:src="@{/easyui/jquery.easyui.min.js}"></script>
	<script type="text/javascript" th:src="@{/easyui/jquery.easyui.mobile.js}"></script>
	<script type="text/javascript" th:src="@{/easyui/locale/easyui-lang-zh_CN.js}"></script>
	<script type="text/javascript" th:src="@{/js/jquery.cookie.js}"></script>
	<script type="text/javascript" th:src="@{/js/note_common.js}"></script>
	<script type="text/javascript" th:src="@{/js/crypto/3.1.9/crypto-js.js}"></script>
	<script type="text/javascript" th:src="@{/js/crypto/crypt.js}"></script>
	<style>

		.footer{
			position:fixed;
			bottom:0;
			text-align:center;
			/*
			filter:alpha(opacity:30);
			opacity:0.3;
			-moz-opacity:0.3;
			-khtml-opacity: 0.3;
			*/
			font-size: 12px;
			width:100%;
			padding: 10px;
		}
		.textbox .textbox-text{
			padding: 7px 4px;
			font-size: 18px;
		}
		.tt-inner{
			display:inline-block;
			line-height:16px;
			padding-top:6px;
			font-size: 16px;
		}
		p{
			line-height:150%;
		}
		.menu-item{
			padding-top:10px;
			height:80px !important;
			text-align: center;
		}


		#cover1{
			position: fixed;
			width: 100%;
			height: 100%;
			z-index: 9999;
			left: 0;
			top: 0;
			background-color: rgba(0,0,0,0.2); /* RGB背景透明，文字不透明*/
			display: none;
/*			opacity: 0.2;
			filter:alpha(opacity:20);
			-moz-opacity:0.2;
			-khtml-opacity: 0.2*/
		}
		#cover2{
			position: absolute;
			top: 25%;
			left: 10%;
			height: 50%;
			width: 80%;
			background-color: white;
			border-radius:15px;
			border: 1px solid #95B8E7;
		}

		.table-menu{
			border-collapse: collapse;
			width: 100%;
			height: 100%;
			border-radius:15px
		}

		.table-menu td{
			font-size: 16px;

			border: 0px solid #D4E2F6;
			vertical-align: middle;
			text-align: center;
		}

		.table-menu td:hover{
			background-color:#D4E2F6;
			cursor: pointer;
		}
        .l-btn-text,.panel-title {

            font-size: 16px;
        }

/*		table tr:first-child td:first-child {
			border-top: 0px;
			border-left: 0px;
		}

		table tr:first-child td:last-child {
			border-top: 0px;
			border-right: 0px;
		}
		table tr:last-child td:first-child {
			border-left: 0px;
			border-bottom: 0px;
		}

		table tr:last-child td:last-child {
			border-right: 0px;
			border-bottom: 0px;
		}*/

		.footer-div{
			float: left;
			border: 1px solid red;
		}

        .tbView{
            margin-top: 50px;
            border-collapse: collapse;
            width: 70%;
            text-align: center;
        }

        .tbView caption {
            caption-side: top;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            padding: 10px;
        }
        .tbView td{
            font-size: 16px;
            border: 1px dotted #95B8E7;
            height: 40px;
        }

        .tbView th{
            font-size: 16px;
            border: 1px dotted #95B8E7; /*#aaa;*/
            text-align: center;
            height: 30px;
        }
        .dialog-button{
            text-align: center;
        }
	</style>
</head>
<body>
<div class="easyui-navpanel" style="position:relative;padding:5px">
	<header>
		<div class="m-toolbar">
			<div class="m-title" id="toolbar-title">主页</div>
				<div class="m-left">
					<a href="javascript:void(0)" class="easyui-linkbutton m-back" data-options="plain:true,outline:true" onclick="doConfirm();">登出</a>
				</div>
			<div class="m-right">
                <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-reload',plain:true,outline:true" onclick="window.location.href='/note/main'"></a>
			</div>
		</div>
	</header>

    <table class="tbView" align="center">
        <caption>本月消费一览表(<span th:text="${info.curMonth}"></span>)<br>
            <span th:text="'￥ '+${info.totalCost}+' 元'" style="color: red"></span>
        </caption>
        <thead>
        <tr>
            <th>类别</th>
            <th>金额</th>
        </tr>
        </thead>
        <tbody>
        <tr th:if="${not #lists.isEmpty(info.list)}" th:each="item,itemStat  : ${info.list}">
            <td align="center" th:text="${item.kinds.desc}"></td>
            <td align="center" th:text="${item.cost}" style="padding-right: 5px"></td>
        </tr>

        <tr th:if="${#lists.isEmpty(info.list)}">
            <td colspan="2" align="center">暂无记录</td>
        </tr>

        </tbody>
    </table>

    <table align="center" style="margin-top: 100px">
        <tr>
            <td><img th:src="@{/images/log3.png}"></td>
        </tr>
        <tr>
            <td align="center">
                Ver.: 1.0
            </td>
        </tr>
    </table>

	<footer style="padding:2px 3px;display: none">
		<div class="m-buttongroup m-buttongroup-justified" style="width:100%">
			<a href="javascript:window.location.href='/note/consume_list'" class="easyui-linkbutton" data-options="iconCls:'icon-large-chart',size:'large',iconAlign:'top',plain:true">报表查看</a>
			<a href="javascript:window.location.href='/note/consume_edit'" class="easyui-linkbutton" data-options="iconCls:'icon-large-shapes',size:'large',iconAlign:'top',plain:true">新增记事</a>
			<a href="javascript:window.location.href='/note/user_center'" class="easyui-linkbutton" data-options="iconCls:'icon-large-clipart',size:'large',iconAlign:'top',plain:true">个人中心</a>
		</div>
	</footer>
<!--	<div id="cover1">
		<div id="cover2">
			<table class="table-menu" id="table-menu">
				<tr>
					<td>
						<img th:src="@{/images/modem.png}"/><br>主页
					</td>
					<td onclick="window.location.href='/note/consume_list'">
						<img th:src="@{/images/scanner.png}"/><br>报表查询
					</td>
					<td onclick="window.location.href='/note/consume_edit'">
						<img th:src="@{/images/scanner.png}"/><br>新增消费
					</td>
				</tr>
				<tr>
					<td onclick="logout();">
						<img th:src="@{/images/scanner.png}"/><br>安全退出
					</td>
				</tr>
			</table>
		</div>
	</div>-->
<!--	<footer>
		<div class="m-toolbar">
			<div class="m-title">-->
<!--				<div id="tabs" class="easyui-tabs" data-options="tabHeight:70,fit:true,tabPosition:'bottom',border:false,pill:true,narrow:true,justified:true">
					<div style="padding:10px" title="主页">
						<div class="panel-header tt-inner">
							<img th:src="@{/images/modem.png}"/><br>主页
						</div>
						<p>
							这是主页
						</p>
					</div>
					<div style="padding:10px" title="报表查询">
						<div class="panel-header tt-inner" onclick="window.location.href='/note/consume_list'">
							<img th:src="@{/images/scanner.png}"/><br>报表查询
						</div>
					</div>
					<div style="padding:10px" title="新增记事">
						<div class="panel-header tt-inner">
							<img th:src="@{/images/pda.png}"/><br>新增记事
						</div>
					</div>
					<div style="padding:10px" title="个人中心">
						<div class="panel-header tt-inner" onclick="showMenu()">
							<img th:src="@{/images/tablet.png}"/><br>菜单
						</div>
					</div>
				</div>-->
<!--			</div>
		</div>
	</footer>-->

    <div id="dlg1" class="easyui-dialog" style="padding:20px;width:200px;font-size: 18px;display: none" data-options="inline:true,modal:true,closed:true,title:'提示'">
        <p>确认要登出吗?</p>
        <div class="dialog-button">
            <a href="javascript:void(0)" class="easyui-linkbutton" style="width:40%;height:45px;margin-right: 20px" onclick="logout();">是的</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" style="width:40%;height:45px" onclick="$('#dlg1').dialog('close')">再看看</a>
        </div>
    </div>
</div>
<script>
    function doConfirm() {
        $('#dlg1').dialog('open').dialog('center');
    }

    $("footer").show();
</script>
<!--<script type="text/javascript" th:src="@{/js/note_main.js}"></script>-->
</body>
</html>